<template>
  <div class="circle-list">

    <div class="item">

      <!--S头像昵称-->
      <div class="header">
        <img class="avatar" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=910094960,4022265604&fm=26&gp=0.jpg" />
        <p class="name">醉解心语</p>
        <p class="time">1分钟前</p>
        <p class="control" @click="$emit('click-control',sheet_options)"><i class="iconfont icon-caozuo"></i></p>
      </div>
      <!--S头像昵称-->

      <!--S文字内容-->
      <div class="text">
        <text :selectable="true">北京新增病例属于正常的疫情反弹么？6月18日下午，北京市新冠肺炎疫情防控工作新闻发布会第125场召开，北京青年报记者从会上了解到，中国疾病预防控制中心流行病学首席专家吴尊友介绍做了回应。</text>
      </div>
      <!--E文字内容-->

      <!--S相关摊位-->
      <div class="stall" v-if="showLocation">
        <img class="stall-logo" mode="aspectFill" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592546163165&di=0d5101b33d6ec7232008c58b2827fa8b&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20170505%2F173944a5e0ff4e47afe0115488832edb_th.jpeg" />
        <p class="stall-name">临汾市小龙坎</p>
        <p class="stall-scope">火锅、虾滑、猪脑、涮羊肉、鸳鸯锅、猪脑、涮羊肉、鸳鸯锅</p>
      </div>
      <!--E相关摊位-->

      <!--S定位-->
      <div class="location" v-if="showLocation">
        <i class="iconfont icon-weizhidingwei"></i>临汾.尧都区宽窄巷子
      </div>
      <!--E定位-->

      <!--S底部操作|分享|点赞-->
      <div class="bottom">
        <p class="share"><i class="iconfont icon-zhuanfa"></i></p>
        <p class="praise"><i class="iconfont icon-zan-copy"></i>点赞</p>
        <p class="comment"><i class="iconfont icon-pinglun"></i>评论</p>
      </div>
      <!--E底部操作|分享|点赞-->

    </div>

    <div class="item">

      <!--S头像昵称-->
      <div class="header">
        <img class="avatar" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=910094960,4022265604&fm=26&gp=0.jpg" />
        <p class="name">醉解心语</p>
        <p class="time">1分钟前</p>
        <p class="control"><i class="iconfont icon-caozuo"></i></p>
      </div>
      <!--S头像昵称-->

      <!--S文字内容-->
      <div class="text">
        一个图片正方形图片，北京新增病例属于正常的疫情反弹么？
      </div>
      <!--E文字内容-->

      <!--S图片-->
      <div class="images one-long">
        <img
          mode="aspectFill"
          :lazy-load="true"
          src="http://img3.imgtn.bdimg.com/it/u=2386287118,1335061721&fm=26&gp=0.jpg"
        />
      </div>
      <!--S图片-->

      <!--S相关摊位-->
      <div class="stall">
        <img class="stall-logo" mode="aspectFill" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592546163165&di=0d5101b33d6ec7232008c58b2827fa8b&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20170505%2F173944a5e0ff4e47afe0115488832edb_th.jpeg" />
        <p class="stall-name">临汾市小龙坎</p>
        <p class="stall-scope">火锅、虾滑、猪脑、涮羊肉、鸳鸯锅、猪脑、涮羊肉、鸳鸯锅</p>
      </div>
      <!--E相关摊位-->

      <!--S定位-->
      <div class="location">
        <i class="iconfont icon-weizhidingwei"></i>临汾.尧都区宽窄巷子
      </div>
      <!--E定位-->

      <!--S底部操作|分享|点赞-->
      <div class="bottom">
        <p class="share"><i class="iconfont icon-zhuanfa"></i></p>
        <p class="praise"><i class="iconfont icon-zan"></i>999+</p>
        <p class="comment"><i class="iconfont icon-pinglun"></i>12</p>
      </div>
      <!--E底部操作|分享|点赞-->

    </div>

    <div class="item" v-for="item in data" :key="id">

      <!--S头像昵称-->
      <div class="header">
        <img class="avatar" :src="item.header" />
        <p class="name">{{item.nickname}}</p>
        <p class="time">{{item.time}}</p>
        <p class="control" @click="$emit('click-control',sheet_options)"><i class="iconfont icon-caozuo"></i></p>
      </div>
      <!--S头像昵称-->

      <!--S文字内容-->
      <div class="text"
           v-if="item.text"
      >
        {{item.text}}
      </div>
      <!--E文字内容-->

      <!--S图片-->
      <div
        class="images"
        :class="item.image_class"
        v-if="item.images"
      >
        <img v-for="(image,image_index) in item.images"
             @load="imageLoad(arguments,item)"
             mode="aspectFill"
             :key="image_index"
             :lazy-load="true"
             :src="image"
        />
      </div>
      <!--S图片-->

      <!--S相关摊位-->
      <div class="stall" v-if="showStall">
        <img class="stall-logo" mode="aspectFill" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592546163165&di=0d5101b33d6ec7232008c58b2827fa8b&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20170505%2F173944a5e0ff4e47afe0115488832edb_th.jpeg" />
        <p class="stall-name">临汾市小龙坎</p>
        <p class="stall-scope">火锅、虾滑、猪脑、涮羊肉、鸳鸯锅、猪脑、涮羊肉、鸳鸯锅</p>
      </div>
      <!--E相关摊位-->

      <!--S定位-->
      <div class="location" v-if="showLocation">
        <i class="iconfont icon-weizhidingwei"></i>临汾.尧都区宽窄巷子
      </div>
      <!--E定位-->

      <!--S底部操作|分享|点赞-->
      <div class="bottom">
        <p class="share"><i class="iconfont icon-zhuanfa"></i></p>
        <p class="praise"><i class="iconfont icon-zan-copy"></i>点赞</p>
        <p class="comment"><i class="iconfont icon-pinglun"></i>评论</p>
      </div>
      <!--E底部操作|分享|点赞-->

    </div>

  </div>
</template>

<script>
  export default {
    data () {
      return {
        data: [
          {
            id: 1,
            header: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=910094960,4022265604&fm=26&gp=0.jpg',
            nickname: '醉解心语',
            time: '1分钟前',
            text: '北京新增病例属于正常的疫情反弹么？6月18日下午，北京市新冠肺炎疫情防控工作新闻发布会第125场召开，北京青年报记者从会上了解到，中国疾病预防控制中心流行病学首席专家吴尊友介绍做了回应。'
          },
          {
            id: 2,
            header: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=910094960,4022265604&fm=26&gp=0.jpg',
            nickname: '醉解心语',
            time: '1分钟前',
            text: '一个宽图片，北京新增病例属于正常的疫情反弹么？',
            images: ['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592500692206&di=4e6d2c22fd566699b9fadc9b65649173&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F72%2F82%2F19300000009075130804824786610.jpg'],
            image_class: ''
          },
          {
            id: 3,
            header: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=910094960,4022265604&fm=26&gp=0.jpg',
            nickname: '醉解心语',
            time: '1分钟前',
            text: '一个高图片，北京新增病例属于正常的疫情反弹么？',
            images: ['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592502167852&di=a9feb7f9352575061cd30fa8d20a7365&imgtype=0&src=http%3A%2F%2Fimg0.pclady.com.cn%2Fpclady%2F1206%2F16%2F839148_2.jpg'],
            image_class: ''
          },
          {
            id: 4,
            header: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=910094960,4022265604&fm=26&gp=0.jpg',
            nickname: '醉解心语',
            time: '1分钟前',
            text: '一个高图片，北京新增病例属于正常的疫情反弹么？',
            images: ['http://c.hiphotos.baidu.com/zhidao/pic/item/50da81cb39dbb6fd58d601640924ab18962b37e6.jpg'],
            image_class: ''
          },
          {
            id: 5,
            header: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=910094960,4022265604&fm=26&gp=0.jpg',
            nickname: '醉解心语',
            time: '1分钟前',
            text: '一个高图片，北京新增病例属于正常的疫情反弹么？',
            images: [
              'http://c.hiphotos.baidu.com/zhidao/pic/item/50da81cb39dbb6fd58d601640924ab18962b37e6.jpg',
              'http://c.hiphotos.baidu.com/zhidao/pic/item/50da81cb39dbb6fd58d601640924ab18962b37e6.jpg'
            ],
            image_class: ''
          },
          {
            id: 6,
            header: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=910094960,4022265604&fm=26&gp=0.jpg',
            nickname: '醉解心语',
            time: '1分钟前',
            text: '一个高图片，北京新增病例属于正常的疫情反弹么？',
            images: [
              'http://c.hiphotos.baidu.com/zhidao/pic/item/50da81cb39dbb6fd58d601640924ab18962b37e6.jpg',
              'http://c.hiphotos.baidu.com/zhidao/pic/item/50da81cb39dbb6fd58d601640924ab18962b37e6.jpg',
              'http://c.hiphotos.baidu.com/zhidao/pic/item/50da81cb39dbb6fd58d601640924ab18962b37e6.jpg',
              'http://c.hiphotos.baidu.com/zhidao/pic/item/50da81cb39dbb6fd58d601640924ab18962b37e6.jpg'
            ],
            image_class: ''
          },
          {
            id: 7,
            header: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=910094960,4022265604&fm=26&gp=0.jpg',
            nickname: '醉解心语',
            time: '1分钟前',
            text: '一个高图片，北京新增病例属于正常的疫情反弹么？',
            images: [
              'http://c.hiphotos.baidu.com/zhidao/pic/item/50da81cb39dbb6fd58d601640924ab18962b37e6.jpg',
              'http://c.hiphotos.baidu.com/zhidao/pic/item/50da81cb39dbb6fd58d601640924ab18962b37e6.jpg',
              'http://c.hiphotos.baidu.com/zhidao/pic/item/50da81cb39dbb6fd58d601640924ab18962b37e6.jpg',
              'http://c.hiphotos.baidu.com/zhidao/pic/item/50da81cb39dbb6fd58d601640924ab18962b37e6.jpg',
              'http://c.hiphotos.baidu.com/zhidao/pic/item/50da81cb39dbb6fd58d601640924ab18962b37e6.jpg'
            ],
            image_class: ''
          },
          {
            id: 8,
            header: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=910094960,4022265604&fm=26&gp=0.jpg',
            nickname: '醉解心语',
            time: '1分钟前',
            text: '一个高图片，北京新增病例属于正常的疫情反弹么？',
            images: [
              'http://c.hiphotos.baidu.com/zhidao/pic/item/50da81cb39dbb6fd58d601640924ab18962b37e6.jpg',
              'http://c.hiphotos.baidu.com/zhidao/pic/item/50da81cb39dbb6fd58d601640924ab18962b37e6.jpg',
              'http://c.hiphotos.baidu.com/zhidao/pic/item/50da81cb39dbb6fd58d601640924ab18962b37e6.jpg',
              'http://c.hiphotos.baidu.com/zhidao/pic/item/50da81cb39dbb6fd58d601640924ab18962b37e6.jpg',
              'http://c.hiphotos.baidu.com/zhidao/pic/item/50da81cb39dbb6fd58d601640924ab18962b37e6.jpg',
              'http://c.hiphotos.baidu.com/zhidao/pic/item/50da81cb39dbb6fd58d601640924ab18962b37e6.jpg'
            ],
            image_class: ''
          }
        ],
        // 上拉菜单选项
        sheet_options: [
          {
            text: '关注Ta',
            value: 'attention'
          },
          {
            text: '取关Ta',
            value: 'cancel-attention'
          },
          {
            text: '删除',
            value: 'delete'
          }
        ]
      }
    },
    props: {
      /**
       * 接收下拉菜单选择的下标
       */
      sheet_index: {
        type: Number,
        default: -1
      },
      /**
       * 是否显示门店信息
       */
      showStall: {
        type: Boolean,
        default: true
      },
      /**
       * 是否显示定位信息
       */
      showLocation: {
        type: Boolean,
        default: true
      }
    },
    watch: {
      sheet_index (value) {
        if (value >= 0) {
          console.log(this.sheet_options[value].value)
        }
      }
    },
    methods: {
      /**
       * 图片加载完成后，图片的显示css设置
       * @param ev 原事件对象
       * @param item 数据
       */
      imageLoad (ev, item) {
        let detail = ev[0].mp.detail
        let length = item.images.length
        // 单张图片
        if (length === 1) {
          let ratio = detail.width / detail.height
          if (ratio > 1.1) {
            // 宽大与高
            item.image_class = 'one-long'
          } else if (ratio < 0.9) {
            // 高大于宽
            item.image_class = 'one-height'
          } else {
            // 将近正方形
            item.image_class = 'one-square'
          }
        } else if (length === 2 || length === 4) {
          // 2张图片和4张图片
          item.image_class = 'tow-four'
        } else if (length === 3 || length >= 5) {
          item.image_class = 'six'
        }
      }
    }
  }
</script>

<style scoped lang="less" src="./circle-list.less"></style>
